<template>
    <breadCrumb ref="breadcrumb" :item="item"></breadCrumb>
    <div class="table-wrapped">
        <div class="table-top">
            <div class="table-content">
                <el-table :data="tableData" style="width: 100%;" border stripe>
                    <el-talbe-column type="index" width="50"> </el-talbe-column>
                    <el-table-column label="信息主题" prop="message_title"></el-table-column>
                    <el-table-column label="消息类别" prop="message_category"></el-table-column>
                    <el-table-column label="发布部门" prop="message_publish_department"></el-table-column>
                    <el-table-column label="接收对象" prop="message_receipt_object"></el-table-column>
                    <el-table-column label="删除日期" prop="message_delete_time">
                        <template #default="{ row }">
                            <div>{{ row.message_delete_time?.slice(0, 10) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200" fixed="right">
                        <template #default="{ row }">
                            <div>
                                <el-button type="success" @click="renew(row)">还原</el-button>
                                <el-button type="danger" @click="realDelte(row.id)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="table-footer">
            <el-pagination :page-size="1" :current-page="paginationData.recyclecurrentPage" :pager-count="7"
                :page-count="paginationData.recyclepageCount" :total="paginationData.recycleTotal"
                @current-change="RecycleCurrentChange" layout="prev, pager, next" />
        </div>


    </div>
    <renewAndDelete ref="rad" @success="getRecycleMessageFirstPageList"></renewAndDelete>
</template>
<script setup lang="ts">
import { reactive, ref, onBeforeUnmount } from 'vue'
import breadCrumb from '@/components/bread_crumb.vue'
import { bus } from "@/utils/mitt.js"
import { recycleList, recover, delMessage, getRecycleMessageLength, returnRecycleListData } from '@/api/message'
import renewAndDelete from '../components/delete.vue'

//面包屑
const breadcrumb = ref()
//面包屑参数
const item = ref({
    first: '消息管理',
    second: '回收站',
})

const tableData = ref([])
// 获取回收站数据
const getRecyleList = async () => {
    tableData.value = await recycleList()
}
getRecyleList()
// 恢复和删除 组件
const rad = ref()
const renew = (row: any) => {
    bus.emit("renewID", row)
    rad.value.open()
}
const realDelte = (id: number) => {
    bus.emit("realDelteID", id)
    rad.value.open()
}

//  分页数据
const paginationData = reactive({
    // 回收站总数
    recycleTotal: 1,
    // 回收站列表总页数
    recyclepageCount: 1,
    // 回收站列表当前所处页数
    recyclecurrentPage: 1,

})
// 获取回收站列表的页数
const getRecycleMessageLengthFn = async () => {
    const res = await getRecycleMessageLength()
    paginationData.recycleTotal = res.length
    paginationData.recyclepageCount = Math.ceil(res.length / 10)
}
getRecycleMessageLengthFn()
// 默认获取回收站列表第一页的数据
const getRecycleMessageFirstPageList = async () => {
    tableData.value = await returnRecycleListData(1)
}
getRecycleMessageFirstPageList()

// 回收站列表监听换页
const RecycleCurrentChange = async (value: number) => {
    paginationData.recyclecurrentPage = value
    tableData.value = await returnRecycleListData(paginationData.recyclecurrentPage)
}
// 取消订阅/监听
onBeforeUnmount(() => {
    bus.all.clear()
})
</script>
<style lang="scss" scoped>
.table-wrapped {
    padding: 8px;
    height: calc(100vh - 101px);
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .table-top {
        display: flex;
        flex-direction: column;

        .table-content {
            padding: 10px 20px 20px;
            margin-bottom: 8px;
            background: #fff;
        }
    }

    .table-footer {
        display: flex;
        justify-content: flex-end;
        background: #fff;
    }
}

:deep(.el-table .cell) {
    font-weight: 400;
}
</style>
